<template>
  <teleport to="body">
    <transition name="pdf-fade">
      <div 
        v-if="modelValue" 
        class="pdf-viewer-overlay"
        :class="{ 'with-background': background }"
        @click.self="closeViewer"
      >
      <div class="pdf-close-button" @click="closeViewer">
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
          <path 
            d="M12 4L4 12M4 4L12 12" 
            stroke="currentColor" 
            stroke-width="2" 
            stroke-linecap="round" 
            stroke-linejoin="round"
          />
        </svg>
      </div>
        <div class="pdf-viewer-container">
          <div class="pdf-content">
            <iframe 
              v-if="pdfUrl" 
              :src="pdfUrl" 
              width="100%" 
              height="100%"
              frameborder="0"
              style="background-color: white;"
            ></iframe>
          </div>
        </div>
      </div>
    </transition>
  </teleport>
</template>

<script setup>
// 定义 props - 使用更语义化的命名
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  pdfUrl: {  // 更明确的 prop 名称，表示这是 PDF 的 URL
    type: String,
    required: true,
    default: ''
  },
  background: {
    type: Boolean,
    default: true
  },
  // 可选：自定义查看器尺寸
  width: {
    type: String,
    default: '90%'
  },
  height: {
    type: String,
    default: '90%'
  }
})

// 定义 emits
const emit = defineEmits(['update:modelValue'])

/**
 * 关闭 PDF 查看器
 */
const closeViewer = () => {
  emit('update:modelValue', false)
}

// 暴露方法给父组件（可选）
defineExpose({
  close: closeViewer
})
</script>

<style scoped>
.pdf-viewer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pdf-viewer-overlay.with-background {
  background-color: rgba(0, 0, 0, 0.5);
}

.pdf-viewer-overlay:not(.with-background) {
  background-color: transparent;
}

.pdf-viewer-container {
  position: relative;
  width: v-bind(width);
  height: v-bind(height);
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
}

.pdf-close-button {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background-color 0.2s ease;
  user-select: none;
}

.pdf-close-button:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.pdf-close-button svg {
  display: block;
}

.pdf-content {
  /* flex: 1; */
  width: 90vw;
  height: 90vh;
}

/* PDF 查看器过渡动画 */
.pdf-fade-enter-active,
.pdf-fade-leave-active {
  transition: opacity 0.3s ease;
}

.pdf-fade-enter-from,
.pdf-fade-leave-to {
  opacity: 0;
}

/* 响应式优化 */
@media (max-width: 768px) {
  .pdf-viewer-container {
    width: 95% !important;
    height: 85% !important;
    margin: 10px;
  }
  
  .pdf-close-button {
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
  }
  
  .pdf-close-button svg {
    width: 14px;
    height: 14px;
  }
}
</style>